<template>
  <div class="tab-content" id="personal_detail">
    <div class="one-panel" id="basic">
      <div class="one-panel-title">
        基本资料
      </div>
      <div class="one-info" v-for="(value, key) in person" v-bind:key="key">
        <label>{{person_cn[key]+":"}}</label>
        <input type="text" v-model="person[key]">
      </div>
    </div>
    <!-- <div class="one-panel" id="signinrecords">
      <div class="one-panel-title">
        签到记录
      </div>
      <div class="record">

      </div>
      
    </div> -->
    <div class="one-panel" id="prizes">
      <div class="one-panel-title">
        获奖情况
      </div>
      <div class="prize" v-for="(prize, index) in prizes" :key="index">
        <div>
          <label>比赛名称:</label>
          <input type="text" class="name" v-model="prizes[index].name">
        </div>
        <div><label>获奖等级:</label><input type="text" class="degree" v-model="prizes[index].degree"></div>
        <div><label>项目简述:</label><textarea class="prize-content" cols="55" rows="4" v-model="prizes[index].content"></textarea></div>
        <div><label>时间:</label><input type="data" class="time" v-model="prizes[index].time"></div>
        <div>
          <div class="delete detail-btn" @click="deletePrize(prizes[index].id)">
            删除该项
          </div>
        </div>
      </div>
      <div class="one-panel-btns">
        <div class="add detail-btn" @click="addPrize">
          添加下一项奖项
        </div>
        <div class="save detail-btn" @click="save">保存</div>
      </div>
      
    </div>
    <!-- <table class="table table-hover table-bordered">
      <tbody>
        <tr v-for="(value, key) in person" v-bind:key="key">
          <td>{{person_cn[key]}}</td>
          <td>{{value}}</td>
        </tr>
      </tbody>
    </table> -->
  </div>
</template>

<script>
const qs = require("qs");
export default {
  name:"personDetail",
  data(){
    return {
      person: {
        id: "",
        name: "",
        gender: "",
        status: "",
        bedroom: "",
        class: "",
        nationality: "",
        QQ: "",
        tel: "",
        idcard: "",
        permission: "",
      },
      person_cn: {
        id: "学号",
        name: "姓名",
        gender: "性别",
        status: "在校情况",
        bedroom: "寝室",
        class: "班级",
        nationality: "民族",
        QQ: "QQ",
        tel: "手机",
        idcard: "身份证号",
        permission: "权限",
        signinrecords: "签到记录",
        prizes: "获奖情况"
      },
      signinrecords:[],
      prizes:[],

    }
  },
  created(){
    this.getInfo();
  },
  components:{
    
  },
  methods:{
    addPrize(){
      const prize_count = this.prizes.length;
      this.prizes.push({
        id:prize_count+1,
        name:"",
        studentId:window.localStorage.id,
        content:"",
        time:null,
        degree:""
      })
    },
    save(){
      this.axios({
        method: "post",
        url: "/upsert_prize",
        data: qs.stringify({data:JSON.stringify(this.prizes)}),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(({ data }) => {
        if (data.status) {
          alert('保存成功');
        }
      });
    },
    deletePrize(id){
      this.axios({
        method: "post",
        url: "/delete_prize",
        data: qs.stringify({id:id}),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(({data})=>{
        if(data.status){
          this.prizes.splice(id-1, 1);
        }
      })
    },
    getInfo() {
      const post_data = {
        id: window.localStorage.id
      };
      this.axios({
        method: "post",
        url: "/get_info",
        data: qs.stringify(post_data),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(({ data }) => {
        if (data.status) {
          const one_stu = data.data.students[0];
          delete one_stu.cookie;
          this.signinrecords = one_stu.signinrecords;
          this.prizes = one_stu.prizes;
          delete one_stu.signinrecords;
          delete one_stu.prizes;
          this.person = one_stu;
        }
      });
    }
  }
}
</script>

<style lang="less">
@import "./css/detail.less";
</style>
